import React, { useState } from 'react';
import {
  Accordion,
  AccordionSummary,
  AccordionDetails,
} from '@mui/material';
import { ExpandMore as ExpandMoreIcon, ExpandLess as ExpandLessIcon } from '@mui/icons-material';
import Tooltip from './Tooltip';

interface NetPyNEAccordionProps {
  children: React.ReactNode;
  [key: string]: any;
}

const NetPyNEAccordion: React.FC<NetPyNEAccordionProps> = ({ children, ...others }) => {
  const [expanded, setExpanded] = useState(false);

  // Ensure children is always treated as an array
  const childrenArray = React.Children.toArray(children);
  const [summary, ...detailsArray] = childrenArray;
  // Wrap details in a fragment to avoid array issues
  const details = detailsArray.length > 0 ? <>{detailsArray}</> : null;

  return (
    <Accordion expanded={expanded} {...others}>
      <AccordionSummary
        onClick={() => setExpanded(!expanded)}
        sx={{ '& .MuiAccordionSummary-expandIconWrapper': { marginRight: 0 } }}
        expandIcon={
          <Tooltip title={expanded ? 'Collapse' : 'Expand'} placement="top">
            {expanded ? (
              <ExpandLessIcon color="inherit" />
            ) : (
              <ExpandMoreIcon color="inherit" />
            )}
          </Tooltip>
        }
      >
        {summary}
      </AccordionSummary>
      <AccordionDetails>{details}</AccordionDetails>
    </Accordion>
  );
};

export default NetPyNEAccordion;

